<template name="goodItem">
	<view class="goodBox" @longpress="disCollection" @tap="toPage" data-url="goodDetail" :data-id="goodInfo.linkId" >
		<view class="shopInfo">
			<text class="iconfont icon-shoucangdianjia"></text>
			<text class="shopName">{{goodInfo.storeName}}</text>
			<text class="juli">{{dis}}</text>
		</view>
		<view class="goodInfo">
			<view class="imgBox">
				<image :src="goodInfo.img"></image>
				<text v-if="isRunning!=1">已失效</text>
			</view>
			<view class="infoBox">
				<text class="goodName">{{goodInfo.name}}</text>
				<view class="priceBox">
					<text class="price">￥{{goodInfo.price.toFixed(2)}}</text>
					<text class="yuyue">已预约{{soldCount}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutation,mapActions} from "vuex";
	import API from "@/common/api.js";
	export default{	
		computed:{
			...mapState({
				locationCity:state=>state.map.locationCity,
				roads:state=>state.map.roads,
				userInfo: state => state.user.userInfo
			})
		},
		name:'goodItem',		//组件名称
		// 传递参数
		props:{
			goodInfo:{
				type:Object,
				default:null
			}
		},
		// 组件参数
		data(){
			return {
				dis: '0米',
				soldCount:0,
				isRunning:1
			}
		},
		// 组件方法
		methods:{
			apiGetDis(){
				let _now=this.roads.longitude+','+this.roads.latitude;
				let _to=this.goodInfo.longi+','+this.goodInfo.lati;
				API.getDistance(_now,_to)
				.then(res=>{
					this.dis=res;
				})
			},
			getYuyue(){
				let cnt=parseInt(this.goodInfo.sold);
				if(cnt<10000){
					this.soldCount=cnt+'人'
				}else{
					this.soldCount=parseFloat(cnt/10000).toFixed(1)+'万人' 
				}
			},
			getStatus(){
				this.$store.dispatch("apiGetGoodDetailById",{
					id:this.goodInfo.linkId,
					userId:0
				}).then(res=>{
					this.isRunning=res.data.data.running;
				}).catch(res=>{
					this.isRunning=2;
				})
			},
			disCollection(){
				this.$store.dispatch("apiFollowGood",{
					userId:this.userInfo.userId,
					linkId:this.goodInfo.linkId
				}).then(res=>{
					if(res.data.code==1){
						uni.showToast({
							title: '已取消关注',
							icon: 'none'
						});
						uni.$emit("sxGuanzhu")
					}
				})
			}
		},
		created() {
			setTimeout(()=>{
				this.getYuyue();
				this.apiGetDis();
				this.getStatus();
			},200)
		}
	}
</script>

<style lang="less" scoped>
	.goodBox{
		background-color: #FFFFFF;
		border-radius: 10upx;
		display: flex;
		flex-direction: column;
		padding: 24upx;
		margin-bottom: 16upx;
	}
	.shopInfo{
		display: flex;
		align-items: center;
		
		.iconfont{
			font-size: 40upx;
			color: #202932;
			margin-right: 10upx;
		}
		.shopName{
			font-size: 32upx;
			color: #202932;
			flex-grow: 1;
		}
		.juli{
			font-size: 28upx;
			color: #878787;
		}
	}
	.goodInfo{
		display: flex;
		margin-top: 20upx;
		.imgBox{
			width: 170upx;
			height: 170upx;
			flex-shrink: 0;
			border-radius: 10upx;
			margin-right: 16upx;
			overflow: hidden;
			position: relative;
			text{
				position: absolute;
				width: 100%;
				font-size: 24upx;
				z-index: 9;
				left: 0;
				bottom: 0;
				text-align: center;
				background-color: rgba(0,0,0,0.5);
				color: #FFFFFF;
				padding: 6upx 0;
			}
		}
		image{
			width: 170upx;
			height: 170upx;
		
		}
		.infoBox{
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			justify-content: space-around;
			.goodName{
				font-size: 32upx;
			}
			.priceBox{
				display: flex;
				align-items: center;
				font-size: 32upx;
				.price{
					color: #ff2020;
					flex-grow: 1;
				}
				.yuyue{
					color: #878787;
					font-size: 28upx;
				}
			}
		}
	}
</style>
